<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title th:text="#{website.name} + '官网'">Gweb官网</title>
  
  <!-- ico -->
  <link th:href="@{/static/web/img/logos/logo.ico}" rel="shortcut icon" type="image/x-icon">

  <!-- Bootstrap -->
  <link th:href="@{/static/web/vendor/bootstrap/css/bootstrap.min.css}" rel="stylesheet">

  <!-- fonts -->
  <link th:href="@{/static/web/vendor/fontawesome-free/css/all.min.css}" rel="stylesheet" type="text/css">
  <link th:href="@{/static/web/fonts/Montserrat.min.css}" rel="stylesheet" type="text/css">
  <link th:href='@{/static/web/fonts/Kaushan.min.css}' rel='stylesheet' type='text/css'>
  <link th:href='@{/static/web/fonts/Droid.min.css}' rel='stylesheet' type='text/css'>
  <link th:href='@{/static/web/fonts/Roboto.min.css}' rel='stylesheet' type='text/css'>

  <!-- styles -->
  <link th:href="@{/static/web/css/agency.min.css}" rel="stylesheet">

</head>

<body id="page-top">

  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
    <div class="container">
      <a class="navbar-brand js-scroll-trigger" href="#page-top" th:text="#{website.name}">Gweb</a>
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        	菜单
       	<i class="fas fa-bars"></i>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
		<!-- 头部栏目 -->
        <ul class="navbar-nav text-uppercase ml-auto">
        	<li class="nav-item" th:each="columns:${columnsList}" >
        		<!-- 菜单为栏目 -->
        		<a class="nav-link js-scroll-trigger" th:if="${columns.type} == 1" th:href="'#' + ${columns.href}" th:text="${columns.name}"></a>
        		<!-- 菜单为链接 -->
	    		<a class="nav-link js-scroll-trigger" th:if="${columns.type} == 2" target="_blank" th:href="${columns.href}" th:text="${columns.name}"></a>
	    	</li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Header -->
  <header class="masthead">
    <div class="container">
      <div class="intro-text">
        <div class="intro-lead-in" th:text="#{web.welcome.desc}">欢迎来到gweb平台！</div>
        <div class="intro-heading"> </div>
        <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#features">查&nbsp;&nbsp;&nbsp;看&nbsp;&nbsp;&nbsp;详&nbsp;&nbsp;&nbsp;情</a>
      </div>
    </div>
  </header>
  
  <!-- 特色 -->
  <section class="page-section" th:id="${columnsList[0].href}">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center">
		  <h2 class="section-heading text-uppercase" th:text="${columnsList[0].name}"></h2>
          <h3 class="section-subheading text-muted" th:text="${columnsList[0].subName}"></h3>
        </div>
      </div>
      <div class="row text-center">
        <div class="col-md-4">
          <span class="fa-stack fa-4x">
            <i class="fas fa-circle fa-stack-2x text-primary"></i>
            <i class="fas fa-hourglass-half fa-stack-1x fa-inverse"></i>
          </span>
          <h4 class="service-heading">高&nbsp;&nbsp;效</h4>
          <p class="text-muted">在此实现高效率的工作</p>
        </div>
        <div class="col-md-4">
          <span class="fa-stack fa-4x">
            <i class="fas fa-circle fa-stack-2x text-primary"></i>
            <i class="fas fa-laptop fa-stack-1x fa-inverse"></i>
          </span>
          <h4 class="service-heading">便&nbsp;&nbsp;捷</h4>
          <p class="text-muted">给您带去更加便捷的体验</p>
        </div>
        <div class="col-md-4">
          <span class="fa-stack fa-4x">
            <i class="fas fa-circle fa-stack-2x text-primary"></i>
            <i class="fa fa-paper-plane fa-stack-1x fa-inverse"></i>
          </span>
          <h4 class="service-heading">美&nbsp;&nbsp;观</h4>
          <p class="text-muted">界面美观大方，令人赏心悦目</p>
        </div>
      </div>
    </div>
  </section>

  <!-- 案例 -->
  <section class="bg-light page-section" th:id="${columnsList[1].href}">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center">
          <h2 class="section-heading text-uppercase" th:text="${columnsList[1].name}"></h2>
          <h3 class="section-subheading text-muted" th:text="${columnsList[1].subName}"></h3>
        </div>
      </div>
      <div class="row">
      	<!-- 案例内容列表 -->
        <div class="col-md-4 col-sm-6 portfolio-item" th:each="content,var:${columnsList[1].contentList}">
          <a class="portfolio-link" data-toggle="modal" th:href="'#portfolioModal' + ${var.index}">
            <div class="portfolio-hover">
              <div class="portfolio-hover-content">
                <i class="fas fa-plus fa-3x"></i>
              </div>
            </div>
            <img class="img-fluid" th:src="${content.img}" th:alt="${content.title}">
          </a>
          <div class="portfolio-caption">
            <h4 th:text="${content.title}"></h4>
            <!-- <p class="text-muted" th:utext="${content.description}"></p> -->
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 关于 -->
  <section class="page-section" th:id="${columnsList[2].href}">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center">
          <h2 class="section-heading text-uppercase" th:text="${columnsList[2].name}"></h2>
          <h3 class="section-subheading text-muted" th:text="${columnsList[2].subName}"></h3>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12">
          <ul class="timeline">
            <li th:each="content,var:${columnsList[2].contentList}" th:if="${var.index}%2 == 0">
              <div class="timeline-image">
                <img class="rounded-circle img-fluid" th:src="${content.img}" alt="">
              </div>
              <div class="timeline-panel">
                <div class="timeline-heading">
                  <h4 th:utext="${content.title}"></h4>
				  <h4 th:utext="${content.subTitle}"></h4>
                </div>
                <div class="timeline-body">
                  <p class="text-muted" th:utext="${content.description}"></p>
                </div>
              </div>
            </li>
            <li th:each="content,var:${columnsList[2].contentList}" th:if="${var.index}%2 == 1" class="timeline-inverted">
              <div class="timeline-image">
                <img class="rounded-circle img-fluid" th:src="${content.img}" alt="">
              </div>
              <div class="timeline-panel">
                <div class="timeline-heading">
                  <h4 th:utext="${content.title}"></h4>
                  <h4 th:utext="${content.subTitle}"></h4>
                </div>
                <div class="timeline-body">
                  <p class="text-muted" th:utext="${content.description}"></p>
                </div>
              </div>
            </li>
            <li class="timeline-inverted">
              <div class="timeline-image">
                <img class="rounded-circle img-fluid" src="/static/web/img/about/end.jpg" alt="">
                <!-- <h4>为了梦想
                  <br>我&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;们
                  <br>一路前行&nbsp;
                </h4> -->
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <!-- 团队 -->
  <section class="bg-light page-section" th:id="${columnsList[3].href}">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center">
          <h2 class="section-heading text-uppercase" th:text="${columnsList[3].name}"></h2>
          <h3 class="section-subheading text-muted" th:text="${columnsList[3].subName}"></h3>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <div class="team-member">
            <img class="mx-auto rounded-circle" src="/static/web/img/team/gaoxb.jpg" alt="">
            <h4>高 小 宝</h4>
            <p class="text-muted">项目总设计师、开发者</p>
            <ul class="list-inline social-buttons">
              <li class="list-inline-item">
                <a href="javascript:;" data-toggle="tooltip" th:title="#{website.phone}">
                  <i class="fa fa-phone"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="javascript:;" data-toggle="tooltip" th:title="#{website.weixin}">
                  <i class="fab fa-weixin"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="javascript:;" data-toggle="tooltip" th:title="#{website.qq}">
                  <i class="fab fa-qq"></i>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-8 mx-auto text-center">
          <p class="large text-muted">现在北京从事Java开发工程师的工作，于空闲时间开发了Gweb网站+后台管理系统，只为能够不断的提升自己的技术和水平。希望能够与有志之士一起交流和探讨，为梦想我们不断前行！！！</p>
        </div>
      </div>
    </div>
  </section>

  <!-- 链接 -->
  <section class="page-section py-5" th:id="${columnsList[4].href}">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center">
          <h2 class="section-heading text-uppercase" th:text="${columnsList[4].name}"></h2>
          <h3 class="section-subheading text-muted" th:text="${columnsList[4].subName}"></h3>
        </div>
      </div>
      
      <!-- 链接栏目的内容 -->
      <div class="row">
      	<div class="col-md-2 col-sm-6" th:each="content:${columnsList[4].contentList}">
          <a th:href="${content.links}" target="_blank" th:title="${content.description}">
            <img class="img-fluid d-block mx-auto" th:src="${content.img}" th:alt="${content.title}">
          </a>
          <center><p class="text-muted" th:text="${content.title}"></p></center>
        </div>
      </div>
      
    </div>
  </section>

  <!-- 联系 -->
  <section class="page-section" th:id="${columnsList[5].href}">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center">
          <h2 class="section-heading text-uppercase" th:text="${columnsList[5].name}"></h2>
          <h3 class="section-subheading text-muted" th:text="${columnsList[5].subName}"></h3>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12">
          <form id="contactForm" name="sentMessage" novalidate="novalidate">
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <input class="form-control" id="name" type="text" placeholder="姓名 *" required="required" data-validation-required-message="请输入您的姓名">
                  <p class="help-block text-danger"></p>
                </div>
                <div class="form-group">
                  <input class="form-control" id="email" type="email" placeholder="邮箱 *" required="required" data-validation-required-message="请输入您的邮箱">
                  <p class="help-block text-danger"></p>
                </div>
                <div class="form-group">
                  <input class="form-control" id="phone" type="tel" placeholder="电话 *" required="required" data-validation-required-message="请输入您的联系方式">
                  <p class="help-block text-danger"></p>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <textarea class="form-control" id="message" placeholder="留言 *" required="required" data-validation-required-message="请输入您的留言"></textarea>
                  <p class="help-block text-danger"></p>
                </div>
              </div>
              <div class="clearfix"></div>
              <div class="col-lg-12 text-center">
                <div id="success"></div>
                <button id="sendMessageButton" class="btn btn-primary btn-xl text-uppercase" type="submit">发&nbsp;&nbsp;&nbsp;送&nbsp;&nbsp;&nbsp;信&nbsp;&nbsp;&nbsp;息</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="footer">
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <span class="copyright" th:utext="#{website.copyright}"><a href="./">gweb</a></span>
        </div>
        <div class="col-md-4">
          <ul class="list-inline social-buttons">
            <li class="list-inline-item">
              <a href="javascript:;" th:title="#{website.phone}">
                <i class="fa fa-phone"></i>
              </a>
            </li>
            <li class="list-inline-item">
              <a href="javascript:;" th:title="#{website.weixin}">
                <i class="fab fa-weixin"></i>
              </a>
            </li>
            <li class="list-inline-item">
              <a href="javascript:;" th:title="#{website.qq}">
                <i class="fab fa-qq"></i>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </footer>

  <!-- 案例展示模态框 -->
  <div class="portfolio-modal modal fade" th:each="content,var:${columnsList[1].contentList}" th:id="'portfolioModal' + ${var.index}" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="close-modal" data-dismiss="modal">
          <div class="lr">
            <div class="rl"></div>
          </div>
        </div>
        <div class="container">
          <div class="row">
            <div class="col-lg-10 mx-auto">
              <div class="modal-body">
                <!-- 项目详细信息 -->
                <h3 class="text-uppercase" th:text="${content.title}"></h3>
                <p class="item-intro text-muted"><a th:href="${content.links}" target="_blank" th:text="${content.links}"></a></p>
                <a th:href="${content.links}" target="_blank"><img class="img-fluid d-block mx-auto" th:src="${content.img}" alt=""></a>
                <p  class="text-muted text-left"th:utext="${content.description}"></p>
                <!-- <ul class="list-inline">
                  <li>日期：2019年4月</li>
                  <li>开发者：gaoxb</li>
                  <li>分类：数据可视化</li>
                </ul> -->
                <button class="btn btn-primary" data-dismiss="modal" type="button">
                	<i class="fas fa-times"></i>&nbsp;&nbsp;关&nbsp;&nbsp;闭 
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Bootstrap core JavaScript -->
  <script th:src="@{/static/web/vendor/jquery/jquery.min.js}"></script>
  <script th:src="@{/static/web/vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>

  <!-- Plugin JavaScript -->
  <script th:src="@{/static/web/vendor/jquery-easing/jquery.easing.min.js}"></script>

  <!-- Contact form JavaScript -->
  <script th:src="@{/static/web/js/jqBootstrapValidation.js}"></script>
  <script th:src="@{/static/web/js/contact_me.js}"></script>

  <!-- Custom scripts for this template -->
  <script th:src="@{/static/web/js/agency.min.js}"></script>
  <script th:src="@{/static/web/js/index.js}"></script>
  
</body>

</html>
